<template>
  <el-dialog
    title="专利详情"
    :visible.sync="dialogVisible"
    append-to-body
    width="45%"
    class="eldialog">
    <el-table
      :data="tableData"
      class="eltable"
      :header-cell-style="headerCellStyle"
      style="width: 100%">
      <el-table-column
        prop="pn"
        label="公开号">
      </el-table-column>
      <el-table-column
        prop="title"
        label="专利名称">
        <template slot-scope="scope">
          <p :title="scope.row.title" class="wrap">{{scope.row.title}}</p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :current-page.sync="ipi"
      :page-size="ips"
      :total="total"
      style="text-align:center;margin-top:20px">
    </el-pagination>
  </el-dialog>
</template>

<script>
export default {
  /* props: {
    data: {
      type: Array
    },
  }, */
  data() {
    return {
      data:[],
      dialogVisible: false,
      tableData: [],
      ipi: 1,
      ips: 5,
      total: 0,
    }
  },
  methods: {
    init(data) {
      this.ipi = 1
      this.data = data
      this.dialogVisible = true
      this.tableData = data.slice((this.ipi - 1) * this.ips, (this.ipi - 1) * this.ips + this.ips)
      this.total = data.length
    },
    handleCurrentChange(val) {
      this.ipi = val
      this.tableData = this.data.slice((this.ipi - 1) * this.ips, (this.ipi - 1) * this.ips + this.ips)
    },
    headerCellStyle() {
      return {
        'font-weight': 'normal',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>